<template>
  <div class="dashboard">
    <div class="main-header">
      <div class="brand">
        YJFCMS
      </div>
      <div class="header-right">
        首页
      </div>
    </div>
    <div class="main-container">
      <div class="main-aside">左边导航区域</div>
      <div class="main-content">
        <el-button type="primary">主要按钮</el-button>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>

<style scoped>
  .main-header{
    height:50px;
    background-color:#006fc4;
    box-sizing:border-box;
    padding:10px;
    line-height:30px;
    color:white;
    display:flex;
  }
  .main-header .brand{
    font-size:16px;
    font-weight:bold;
    width:200px;
  }
  .main-header .main-right{

  }
  .main-container{
    position:relative;
    flex-grow:1;
  }
  .main-aside{
    position:absolute;
    width:200px;
    border-right:1px solid #ccc;
    top:0;
    bottom:0;
  }
  .main-content{
    margin-left:200px;
  }
  .dashboard{
    height:100%;
    display: flex;
    flex-direction: column;
  }
</style>
